<template>
    <view class="clockIn">
        <view class="content">
            <view class="map">
                <map style="width: 698rpx; height: 590rpx;border-radius: 16rpx 16rpx 0 0;" :latitude="location.latitude"
                    :longitude="location.longitude" scale="14" :markers="covers"></map>
            </view>
            <view class="clock_btn">
                <view class="btn flex_c" :class="{ 'disabled': !canClock }" @click="checkCard">打卡</view>
                <view class="tips">
                    <image src="@/static/images/workerPage/location.png" />
                    <view v-if="canClock">已进入打卡范围：{{ addressInfo.address }}</view>
                    <view v-else>不在打卡范围内，无法打卡</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app';
import { ref, reactive, computed } from 'vue';
import { workerCheckCard } from '@/api/workerPage/order';
import { useMap } from '@/hooks/useMap';
import { useMemberStore } from '@/stores';
const map = useMap()

let location = reactive<{ latitude: number, longitude: number }>({
    latitude: 0,
    longitude: 0
})
const orderLocation =  reactive<{ latitude: number, longitude: number }>({
    latitude: 0,
    longitude: 0
})
const id = ref("")
onLoad(async (options: any) => {
    id.value = options.id
    orderLocation.latitude = options.lat
    orderLocation.longitude = options.lng
    location = await map.getLocation() as any
    await getAddressInfo()
    setMarkers()
    calcDistance()
})

// 获取当前打卡的位置
const addressInfo = ref<any>({})
const getAddressInfo = async () => {
    addressInfo.value = await map.handlerGetAddress([location.latitude, location.longitude])
}
// 检测是否可以打卡
const canClock = computed(() => {
    return distance.value <= 6666
})
const distance = ref(9999)
const calcDistance = async () => {
    const { getLocation, handlerGetDistance } = useMap()
    const location:any = await getLocation()
    const res = await handlerGetDistance([location.latitude,location.longitude], [orderLocation.latitude,orderLocation.longitude])
    distance.value = res.rows[0].elements[0].distance ?? 0
}

// 添加覆盖物
const covers = reactive([
    {
        id: 1,
        latitude: 0,
        longitude: 0,
        iconPath: '/static/images/workerPage/location.png',
        width: 24,
        height: 24
    }
])
const setMarkers = () => {
    covers[0].latitude = location.latitude
    covers[0].longitude = location.longitude
}

// 进行打卡
const checkCard = async () => {
    if(!canClock.value){
        uni.showToast({
            title: '不在打卡范围内，无法打卡',
            icon: 'none'
        })
        return
    } 
    try {
        const { userInfo } = useMemberStore()
        const par = {
            workUserId: userInfo.userId,
            id: id.value,
            signPlace: addressInfo.value.address
    }
        const res: any = await workerCheckCard(par)
    if (res.code == 0) {
        uni.showToast({
            title: '打卡成功',
            icon: 'success',
            mask: true
        })
        setTimeout(() => {
            uni.navigateBack()
        }, 500)
    }
} catch (error) {
    console.log(error);
    uni.showToast({
            title: '打卡失败,请稍后重试',
            icon: 'success',
            mask: true
        })
}
}

</script>

<style lang="scss" scoped>
.clockIn {
    padding: 24rpx;
    height: 100vh;
    box-sizing: border-box;
    background: #F8F8F8;
    overflow: hidden;
}

.content {
    width: 698rpx;
    background: #FFFFFF;
    border-radius: 16rpx;
}

.map {
    width: 698rpx;
    height: 590rpx;
    border-radius: 16rpx 16rpx 0 0;
}

.clock_btn {
    height: 440rpx;
    background-color: #fff;

    .btn {
        width: 216rpx;
        height: 216rpx;
        background: #FE6E04;
        box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(254, 110, 4, 0.3);
        border-radius: 50%;
        font-weight: 700;
        font-size: 40rpx;
        color: #FFFFFF;
        margin: 0 auto;
        margin-top: 64rpx;
    }

    .tips {
        width: fit-content;
        height: 50rpx;
        margin: 0 auto;
        margin-top: 50rpx;
        display: flex;
        align-items: center;
        font-size: 28rpx;
        color: #888888;

        image {
            width: 48rpx;
            height: 48rpx;
            margin-right: 12rpx;
        }
    }
}

.disabled {
    background: #C2C2C2 !important;
    box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(231,231,231,0.6) !important;
}
</style>